<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        html,body{
            width: 100%;
            height: 100%;
            font-family: "Microsoft Yahei";
            overflow: hidden;
            margin: 0;
        }
        #allmap{
            width: 1500px;
            height: 500px;
            margin: 0 auto;
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=fV2DN6q7eEOadUeSEVGYu2xkfDj4lKk9"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/jquery.min.js"></script>

    <style>
        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }
        .datatable td, .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }
    </style>


</head>
<body>
<div id="app">
    <div class="content-header">
        <h1>首页<small>公司分布图</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公司分布图</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div style="height: 30px">
            <a href="" style="font-size: small;">分布图</a> &nbsp;&nbsp;
            <a href="info.html" style="font-size: small;" target="right">详细信息</a>
        </div>
        <div class="box">
            <div id="allmap"></div>
        </div>
    </div>

</div>



<script>
   /* //百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    //地图初始化完成*/

    //地图的配置：启用鼠标滚轮放大缩小功能（默认不开启）
   // map.enableScrollWheelZoom(true);
    //创建一个地址解析器的实例
   // var geoc = new BMap.Geocoder();




    /*//为地图实例添加了一个鼠标单击的监听事件
    map.addEventListener("click",function(e){
        //事件参数e中保存了鼠标单击时所对应的地理位置point
        var pt = e.point;
        //将鼠标单击时的坐标进行逆地址解析
        geoc.getLocation(pt,function(rs){//解析的结果是一个对象，且作为参数传入了回调函数中
            //该对象的属性中保存了解析后的结构化的地址信息
            var addrComp = rs.addressComponents;
            console.log(addrComp);
            //{streetNumber: "", street: "西长安街", district: "东城区", city: "北京市", province: "北京市"}
            alert(addrComp.province + "," + addrComp.city + "," + addrComp.district + "," + addrComp.street + "," + addrComp.streetNumber)
        })
    });
    
*/
    var points = [];
   //建立坐标点：
   axios.post("/address/findAll.do").then((res) =>{
       //建立坐标点：
       // lng：经度 lat：纬度
       points = res.data.data;
       console.log(points);
       //创建标注点并添加到地图中
       function addMarker(points) {
           //循环建立标注点
           for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
               var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
               var marker = new BMap.Marker(point); //将点转化成标注点

               marker.setLabel(new BMap.Label(points[i].address,{offset:new BMap.Size(30,-10)}));
               map.addOverlay(marker);  //将标注点添加到地图上
               //添加监听事件
               (function() {
                   var thePoint = points[i];
                   marker.addEventListener("click",
                       //显示信息的方法
                       function() {
                           showInfo(this,thePoint);
                       });
               })();
           }
       }

       function showInfo(a,b) {

       }

       //创建地图
       var map = new BMap.Map("allmap");
       map.centerAndZoom(new BMap.Point(114.316,30.581),11);  // 设置中心点
       map.centerAndZoom( "武汉");       //指定中心城市
       map.setCurrentCity("武汉");
       map.addControl(new BMap.MapTypeControl());  //设置可拖拽
       map.enableScrollWheelZoom(true);  //添加滚轮缩放
       addMarker(points); //添加标注

   });


  /* for(var i = 0; i<adds.length; i++){
       var marker = new BMap.Marker(adds[i]);
       map.addOverlay(marker);
       marker.setLabel(new BMap.Label("我是商圈:"+(i+1),{offset:new BMap.Size(20,-10)}));
   }
*/


   /*var points = [
       {"lng":114.316,"lat":30.581,"url":"http://www.baidu.com","id":1,"name":"p1"},
       {"lng":114.326,"lat":30.591,"url":"http://www.mi.com","id":2,"name":"p2"},
       {"lng":114.336,"lat":30.601,"url":"http://www.csdn.com","id":3,"name":"p3"}
   ];*/

   /* //创建标注点并添加到地图中
    function addMarker(points) {
        //循环建立标注点
        for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
            var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
            var marker = new BMap.Marker(point); //将点转化成标注点
            map.addOverlay(marker);  //将标注点添加到地图上
            //添加监听事件
            (function() {
                var thePoint = points[i];
                marker.addEventListener("click",
                    //显示信息的方法
                    function() {
                        showInfo(this,thePoint);
                    });
            })();
        }
    }

   function showInfo(a,b) {

   }


   //创建地图
   var map = new BMap.Map("allmap");
   map.centerAndZoom(new BMap.Point(114.316,30.581),11);  // 设置中心点
   map.centerAndZoom( "武汉");       //指定中心城市
   map.setCurrentCity("武汉");
   map.addControl(new BMap.MapTypeControl());  //设置可拖拽
   map.enableScrollWheelZoom(true);  //添加滚轮缩放
   addMarker(points); //添加标注
*/

</script>


</body>
</html>